// ignore_for_file: must_be_immutable

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'logic.dart';

class WeatherLocationSwitchPage extends StatelessWidget {
  WeatherLocationSwitchPage({Key? key}) : super(key: key);

  final logic = Get.find<WeatherLocationSwitchLogic>();
  final state = Get.find<WeatherLocationSwitchLogic>().state;

  late ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F9FC),
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => Get.back(result: state.currentIndex)),
        centerTitle: true,
        title: Text(LocaleKeys.weather_location_search_title.ts,
            style: TextStyle(fontSize: 50.sp)),
      ),
      body: Container(
        padding: EdgeInsets.only(top: 80.w, left: 40.w, right: 40.w),
        child: Column(
          children: [
            _buildSearchArea(),
            SizedBox(height: 60.h),
            Expanded(
              child: Obx(
                () => Stack(
                  children: state.cityList.isEmpty
                      ? [const Text('')]
                      : [_buildLocationList()],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLocationList() {
    return Padding(
      padding: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 40.h),
      child: GetBuilder<WeatherLocationSwitchLogic>(
        id: 'city_list',
        builder: (controller) => ListView.builder(
          controller: scrollController,
          shrinkWrap: true,
          itemCount: state.cityList.length,
          itemBuilder: (context, index) => Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ListTile(
                onTap: () => logic.onCitySelected(state.cityList[index]),
                leading: Text(
                  state.cityList[index].name!,
                  style: TextStyle(
                      fontSize: 40.sp, color: const Color(0xff434343)),
                ),
              )

              // Ink(
              //   child: InkResponse(
              //     onTap: () => logic.onCitySelected(state.cityList[index]),
              //     child: Container(
              //       width: double.infinity,
              //       height: 120.h,
              //       padding: EdgeInsets.only(top: 50.h),
              //       child: Text(state.cityList[index].name!, style: TextStyle(fontSize: 40.sp, color: const Color(0xff434343))),
              //     ),
              //   ),
              // ),

              // ListView.builder(
              //   shrinkWrap: true,
              //   physics: const NeverScrollableScrollPhysics(),
              //   itemCount: state.filterData[index].cities.length,
              //   itemBuilder: (context, index2) => SizedBox(
              //     height: 90.h,
              //     child: GestureDetector(
              //       child: Padding(
              //         padding: EdgeInsets.symmetric(vertical: 20.h),
              //         child: Row(
              //           children: [
              //             Text(state.filterData[index].cities[index2].name, style: TextStyle(fontSize: 32.sp, color: const Color(0xff434343))),
              //             Text('${state.filterData[index].cities[index2].code}',
              //                 style: TextStyle(fontSize: 32.sp, color: const Color(0xffD6D6D6))),
              //           ],
              //         ),
              //       ),
              //     ),
              //   ),
              // )
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildLetterList() {
    return Align(
      alignment: const FractionalOffset(1.0, 0.5),
      child: SizedBox(
        width: 50.w,
        child: Padding(
          padding: EdgeInsets.only(top: 40.h),
          child: ListView.builder(
            itemCount: state.letters.length,
            itemBuilder: (context, index) => GestureDetector(
              child: Text(
                state.letters[index],
                style: TextStyle(fontSize: 40.sp),
              ),
              onTap: () {
                state.currentIndex.value = index;
                var height = index * 45.0;
                for (int x = 0; x < index; x++) {
                  height += state.filterData.length * 46.0;
                  scrollController.jumpTo(height);
                }
              },
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildSearchArea() {
    return Container(
        height: 140.h,
        decoration: BoxDecoration(
          color: Colors.white70.withOpacity(1.0),
          border: Border.all(color: Colors.white70, width: 0.5),
          borderRadius: BorderRadius.circular(60.r),
        ),
        child: Row(
          children: [
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: LocaleKeys.weather_location_search_hit_text.ts,
                  prefixIcon: Icon(Icons.search,
                      size: 64.w, color: Colors.black.withOpacity(0.9)),
                ),
                onChanged: (value) => logic.filterRegion(value),
              ),
            )
          ],
        ));
  }
}
